<template>
    <div class="kt-echarts">
        <el-alert :closable="false" :show-icon="true" type="success">
            数据获取时间: {{ datetime }}
            <a style="position: absolute; right: 35px; cursor: pointer" @click="onRefresh">点击刷新</a>
        </el-alert>
        <el-row :gutter="10">
            <el-col :span="12">
                <el-card>
                    <echarts :option="memory.option" class="chart-box"/>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card>
                    <echarts :option="keys.option" class="chart-box"/>
                </el-card>
            </el-col>
        </el-row>
        <el-card>
            <p>Redis详细信息</p>
            <table style="border-bottom: 0 solid #f1f1f1;text-align: left">
                <tr v-for="(info, index) in redisInfo" :key="index" style="border-top: 1px solid #f1f1f1;">
                    <td style="padding: .7rem 1rem">{{ info.key }}</td>
                    <td style="padding: .7rem 1rem">{{ info.description }}</td>
                    <td style="padding: .7rem 1rem">{{ info.value }}</td>
                </tr>
            </table>
        </el-card>
    </div>
</template>

<script>
import axios from 'axios'
import {service, dateFormat} from "@/utils";
import {defineComponent, nextTick, onBeforeMount, onBeforeUnmount, onMounted, reactive, ref} from "vue";
import Echarts from '@/components/echarts/index.vue'

export default defineComponent({
    components: {Echarts},
    setup() {
        const datetime = ref();
        const redisInfo = ref();
        const memory = reactive({
            data: [],
            xdata: [],
            option: {
                title: {
                    text: '内存使用情况'
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        return params[0].value;
                    },
                    axisPointer: {
                        animation: false
                    }
                },
                xAxis: {
                    type: 'category',
                    splitLine: {
                        show: false
                    },
                    data: null
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '100%'],
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        formatter: '{value} KB'
                    },
                },
                dataZoom: [
                    {
                        type: 'inside',
                        start: 10,
                        end: 80
                    },
                    {
                        start: 10,
                        end: 80
                    }
                ],
                series: [{
                    name: '模拟数据',
                    type: 'line',
                    showSymbol: false,
                    itemStyle: {
                        color: 'rgb(255, 70, 131)'
                    },
                    data: null
                }]
            },
        });
        const keys = reactive({
            data: [],
            xdata: [],
            option: {
                title: {
                    text: 'Key总数量情况'
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        return params[0].value;
                    },
                    axisPointer: {
                        animation: false
                    }
                },
                xAxis: {
                    type: 'category',
                    splitLine: {
                        show: false
                    },
                    data: null
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '100%'],
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        formatter: '{value}'
                    },
                },
                series: [{
                    name: '模拟数据',
                    type: 'line',
                    showSymbol: false,
                    data: null
                }]
            },
        });

        let interval = null

        const initEchartsHandle = () => {
            let minMemory = 1e10;
            let minSize = 1e10;
            let maxMemory = -1e10;
            let maxSize = -1e10;
            interval = setInterval(() => {
                axios.all([
                    service.get('redis/memoryInfo'),
                    service.get('redis/keysSize')
                ]).then((r) => {
                    let time = dateFormat(new Date(), 'mm:ss');
                    let currentMemory = r[0].data.used_memory / 1024;
                    let currentSize = r[1].data.dbSize;

                    if (currentMemory < minMemory) minMemory = currentMemory
                    if (currentMemory > maxMemory) maxMemory = currentMemory
                    memory.data.push(currentMemory)
                    memory.xdata.push(time);
                    if (memory.data.length >= 300) {
                        memory.data.shift();
                        memory.xdata.shift();
                    }
                    memory.option.series[0].data = memory.data;
                    memory.option.xAxis.data = memory.xdata;

                    if (currentSize < minSize) minSize = currentSize
                    if (currentSize > maxSize) maxSize = currentSize
                    keys.data.push(currentSize);
                    keys.xdata.push(time);
                    if (keys.data.length >= 10) {
                        keys.data.shift();
                        keys.xdata.shift()
                    }

                    keys.option.series[0].data = keys.data;
                    keys.option.xAxis.data = keys.xdata;
                }).catch((r) => {
                    console.error(r);
                    stop();
                })
            }, 1000);
        };

        const onRefresh = () => {
            let date = new Date()
            datetime.value = date.getFullYear() + '年' + date.getMonth() + '月' + date.getDay() + '日' +
                    date.getHours() + '时' + date.getMinutes() + '分' + date.getSeconds() + '秒'

            nextTick(() => {
                service.get('redis/info').then(({data}) => {
                    redisInfo.value = data
                })
            })
        }

        const stop = () => {
            if (interval) {
                clearInterval(interval)
                interval = null;
            }
        }

        onBeforeMount(() => onRefresh())

        onMounted(() => initEchartsHandle())

        onBeforeUnmount(() => stop())
        return {
            memory, keys,
            redisInfo, datetime,
            onRefresh
        };
    }
});
</script>

<style lang="scss" scoped>
.kt-echarts {
    > .el-alert {
        margin-bottom: 10px;
    }

    > .el-row {
        margin-top: -10px;

        .el-col {
            padding-top: 10px;
            padding-bottom: 10px;
        }
    }

    .chart-box {
        min-height: 400px;
    }
}
</style>
